<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像的位置</title>

    <style type="text/css">
        h3 {
            text-align: center;
        }

        .wrapper {
            width: 80%;
            height: 400px;
            background-color: #dedede;
            background-image: url(liuyifei.jpg );
            background-repeat: no-repeat;
            border: 1px solid blue;
            margin: 15px auto;
        }

        .first {
            background-position: left top;
        }

        .second {
            background-position: right bottom;
        }

        .third {
            background-position: center center;
        }

        .fourth {
            background-position: 100px 100px;
        }

        .fifth {
            background-position: -150px -50px;
        }

        .sixth {
            background-position: -161px -129px;
            width: 50px;
            height: 50px;
        }

        .seventh {
            width: 24px;
            height: 24px;
            border: 1px solid blue;
            background-image: url(nicon.png);
            background-repeat: no-repeat;
            background-position: 0 -48px;
        }

        .seventh:hover {
            background-position: 0 -72px;
        }
    </style>

</head>

<body>

    <h3>背景图像的位置</h3>

    <div class="wrapper first"></div>

    <div class="wrapper second"></div>

    <div class="wrapper third"></div>

    <div class="wrapper fourth"></div>

    <div class="wrapper fifth"></div>

    <div class="wrapper sixth"></div>

    <hr>

    <div class="seventh"></div>

</body>

</html>